<template>
  <view class="tabbar">
    <view class="tabbar-item" v-for="(item, index) in tabbarList" :key="item.text" @tap="$to(item.pagePath,{},'launch')">
      <image :src="index === tabs ? item.selectedIconPath : item.iconPath" mode="scaleToFill" />
      <text :class="{ active: index === tabs }">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabbarList: [
          {
            pagePath: '/pages/recruit/home/index',
            text: '首页',
            iconPath: '/static/tab-bar/home.png',
            selectedIconPath: '/static/tab-bar/home-s.png'
          },
          {
            pagePath: '/pages/recruit/notice/list',
            text: '消息',
            iconPath: '/static/tab-bar/notice.png',
            selectedIconPath: '/static/tab-bar/notice-s.png'
          },
          {
            pagePath: '/pages/recruit/home/my',
            text: '我的',
            iconPath: '/static/tab-bar/my.png',
            selectedIconPath: '/static/tab-bar/my-s.png'
          }
        ]
      }
    },
    props: ['tabs']
  }
</script>

<style lang="scss" scoped>
  .tabbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    width: 100%;
    padding-top: 20rpx;
    padding-bottom: calc(#{$safe} + 18rpx);
    background: #ffffff;
    opacity: 1;
    border-top: 1rpx solid #eee;
  }
  .tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    image {
      margin-bottom: 6rpx;
      width: 44rpx;
      height:44rpx;
    }
    text {
      display:block;
      // width: 80rpx;
      height: 28rpx;
      font-size: 20rpx;
      font-weight: 500;
      color: #999999;
      line-height: 28rpx;
      text-align:center;
    }
    .active {
      color: #3f5def;
    }
  }
</style>
